<template>
    <div @click.self="liFocus=null" class="form-design-second clear" ref="second">
        <!-- 左侧栏 -->
        <aside class="el-aside-left fl">
            <dl>
                <dt>控件库</dt>

                <dd class="clear" draggable="true" @dragstart="insertInput" @dragend="dragend" >
                    <span>单行输入框</span>
                    <img src="../../../../static/image/examine/single_line.png" draggable="false" alt="单行输入框图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertTextarea" @dragend="dragend" >
                    <span>多行输入框</span>
                    <img src="../../../../static/image/examine/muliti_line.png" draggable="false" alt="多行输入框图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertNumberInput" @dragend="dragend" >
                    <span>数字输入框</span>
                    <img src="../../../../static/image/examine/number.png" draggable="false" alt="多行输入框图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertRadio" @dragend="dragend" >
                    <span>单选框</span>
                    <img src="../../../../static/image/examine/radio.png" draggable="false" alt="单选框图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertCheckbox" @dragend="dragend" >
                    <span>多选框</span>
                    <img src="../../../../static/image/examine/checkbox.png" draggable="false" alt="多选框图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertDate" @dragend="dragend" >
                    <span>日期</span>
                    <img src="../../../../static/image/examine/date.png" draggable="false" alt="日期图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertDateInterval" @dragend="dragend" >
                    <span>日期区间</span>
                    <img src="../../../../static/image/examine/date_interval.png" draggable="false" alt="日期区间图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertImage" @dragend="dragend" >
                    <span>图片</span>
                    <img src="../../../../static/image/examine/image.png" draggable="false" alt="图片图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertDetail" @dragend="dragend" >
                    <span>明细</span>
                    <img src="../../../../static/image/examine/detail.png" draggable="false" alt="明细图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertCaption" @dragend="dragend" >
                    <span>说明文字</span>
                    <img src="../../../../static/image/examine/caption.png" draggable="false" alt="说明文字图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertMoney" @dragend="dragend" >
                    <span>金额</span>
                    <img src="../../../../static/image/examine/money.png" draggable="false" alt="金额图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertAccessory" @dragend="dragend" >
                    <span>附件</span>
                    <img src="../../../../static/image/examine/accessory.png" draggable="false" alt="附件图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertLinkMan" @dragend="dragend" >
                    <span>联系人</span>
                    <img src="../../../../static/image/examine/linkman.png" draggable="false" alt="联系人图标" />
                </dd>

                <dd class="clear" draggable="true" @dragstart="insertEquation" @dragend="dragend" >
                    <span>计算公式</span>
                    <img src="../../../../static/image/examine/equation.png" draggable="false" alt="计算公式图标" />
                </dd>
            </dl>
        </aside>

        <!-- 右侧栏 (显示外层ul的组件参数)-->
        <aside v-if="newForm[liFocus] && newForm[liFocus].id && liDetailFocus==null" class="el-aside-right fr">
            <!-- 单行输入框设置 -->
            <div v-if="newForm[liFocus].id==1" class="setInput">
                <p class="type">单行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>
                <span>内容最多输入{{newForm[liFocus].maxLength}}字</span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 多行输入框设置 -->
            <div v-if="newForm[liFocus].id==2" class="setTextarea">
                <p class="type">单行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>
                <span>内容最多输入{{newForm[liFocus].maxLength}} 字</span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 数字输入框设置 -->
            <div v-if="newForm[liFocus].id==3" class="setNumberInput">
                <p class="type">数字输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">单位：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].unit" maxLength="20" placeholder="请输入单位"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 单选框设置 -->
            <div v-if="newForm[liFocus].id==4" class="setRadio">
                <p class="type">单行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">选项：最多50项，每项最多20字</p>
                <div class="clear option">
                    <div class="clear" v-for="(item,key) in newForm[liFocus].option" :key="key">
                        <el-input class="fl" v-model.trim.native="item.value" maxLength="20" placeholder="请输入内容"></el-input>
                        <el-button @click="changeOption(key,'sub')" v-if="key!==0" class="el-icon-minus fl"></el-button>
                        <el-button @click="changeOption(key,'add')" class="el-icon-plus fl"></el-button>
                    </div>
                </div>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 多选框设置 -->
            <div v-if="newForm[liFocus].id==5" class="setCheckbox">
                <p class="type">多行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">选项：最多50项，每项最多20字</p>
                <div class="clear option">
                    <div class="clear" v-for="(item,key) in newForm[liFocus].option" :key="key">
                        <el-input class="fl" v-model.trim.native="item.value" maxLength="20" placeholder="请输入内容"></el-input>
                        <el-button @click="changeOption(key,'sub')" v-if="key!==0" class="el-icon-minus fl"></el-button>
                        <el-button @click="changeOption(key,'add')" class="el-icon-plus fl"></el-button>
                    </div>
                </div>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 日期设置 -->
            <div v-if="newForm[liFocus].id==6" class="setDate">
                <p class="type">日期</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">日期类型</p>
                <el-radio-group v-model="newForm[liFocus].dateType">
                    <el-radio :label="1">年-月-日 &nbsp; &nbsp;时-分</el-radio><br />
                    <el-radio :label="2">年-月-日</el-radio>
                </el-radio-group>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 日期区间设置 -->
            <div v-if="newForm[liFocus].id==7" class="setDateInterval">
                <p class="type">日期</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title2">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title2 && checkSameName(newForm[liFocus].title2)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title2" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">日期类型</p>
                <el-radio-group v-model="newForm[liFocus].dateType">
                    <el-radio :label="1">年-月-日 &nbsp; &nbsp;时-分</el-radio><br />
                    <el-radio :label="2">年-月-日</el-radio>
                </el-radio-group>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 图片设置 -->
            <div v-if="newForm[liFocus].id==8" class="setImage">
                <p class="type">图片</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>
                <span :class="{hide:newForm[liFocus].title && checkSameName(newForm[liFocus].title)}">最多可添加9张 </span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 明细设置 -->
            <div v-if="newForm[liFocus].id==9" class="setDetail">
                <p class="type">明细</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入提示文字"></el-input>
 
                <p class="caption">动作名称：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].addDetail" maxLength="20" placeholder="请输入动作名称"></el-input>
            </div>

            <!-- 说明文字设置 -->
            <div v-if="newForm[liFocus].id==10" class="setCaption">
                <p class="type">说明文字</p>

                <p class="caption">说明文字：100字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="100" placeholder="请输入说明文字"></el-input>
 
                <p class="caption">可以输入链接跳转地址：<span v-if="newForm[liFocus].errorURL">链接地址格式有误</span></p>
                <el-input v-model.trim.native="newForm[liFocus].content" @blur="checkFormat" placeholder="请输入链接跳转地址"></el-input>

                <p class="caption">显示</p>
                <el-checkbox v-model="newForm[liFocus].newWindow">（新开窗口）</el-checkbox>
            </div>

            <!-- 金额设置 -->
            <div v-if="newForm[liFocus].id==11" class="setMoney">
                <p class="type">金额</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请填写金额"></el-input>
                <span>最多输入两位小数</span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 附件设置 -->
            <div v-if="newForm[liFocus].id==12" class="setAccessory">
                <p class="type">附件</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 联系人设置 -->
            <div v-if="newForm[liFocus].id==13" class="setLinkMan">
                <p class="type">联系人</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox>

                <p class="caption">选项</p>
                <el-radio-group v-model="newForm[liFocus].count">
                    <el-radio :label="'single'">只能选择1人 &nbsp; &nbsp;</el-radio>
                    <el-radio :label="'multi'">可同时选择多人</el-radio>
                </el-radio-group>
            </div>

            <!-- 计算公式设置 -->
            <div v-if="newForm[liFocus].id==14" class="setEquation">
                <p class="type">计算公式</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].title && checkSameName(newForm[liFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">计算公式</p>
                <!-- <el-input v-model="newForm[liFocus].equation" @focus="showCalculateEquation" readonly placeholder="请输入计算公式"></el-input> -->
                <div class="formula">
                    <ul class="clear" @click="showCalculateEquation">
                        <!-- <li class="fl sign">{{newForm[liFocus].equation}}</li> -->
                        <li :class="{
                            fl:true,
                            sign:item.type=='sign',
                            params:item.id==3 || item.id==11,
                            error:item.title===undefined}" 
                            v-for="(item,key) in newForm[liFocus].equation" 
                            :key="key">
                            <span v-if="item.detailIdx!=null">{{newForm[item.formIdx].title}} . </span>
                            <span v-if="item.title!==undefined">{{item.title}}</span>
                            <span v-else>参数已删</span>
                        </li>
                    </ul>
                </div>
                <!-- <p class="caption">验证</p> -->
                <!-- <el-checkbox v-model="newForm[liFocus].required">（必填）</el-checkbox> -->
            </div>
        </aside>

        <!-- 右侧栏 (显示内层ul的组件参数) -->
        <aside v-if="newForm[liFocus] && newForm[liFocus].id && liDetailFocus!=null" class="el-aside-right fr">
            <!-- 单行输入框设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==1" class="setInput">
                <p class="type">单行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>
                <span>内容最多输入{{newForm[liFocus].detail[liDetailFocus].maxLength}}字</span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 多行输入框设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==2" class="setTextarea">
                <p class="type">单行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>
                <span>内容最多输入{{newForm[liFocus].detail[liDetailFocus].maxLength}} 字</span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 数字输入框设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==3" class="setNumberInput">
                <p class="type">数字输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">单位：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].unit" maxLength="20" placeholder="请输入单位"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 单选框设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==4" class="setRadio">
                <p class="type">单行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">选项：最多50项，每项最多20字</p>
                <div class="clear option">
                    <div class="clear" v-for="(item,key) in newForm[liFocus].detail[liDetailFocus].option" :key="key">
                        <el-input class="fl" v-model.trim.native="item.value" maxLength="20" placeholder="请输入内容"></el-input>
                        <el-button @click="changeDetailOption(key,'sub')" v-if="key!==0" class="el-icon-minus fl"></el-button>
                        <el-button @click="changeDetailOption(key,'add')" class="el-icon-plus fl"></el-button>
                    </div>
                </div>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 多选框设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==5" class="setCheckbox">
                <p class="type">多行输入框</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">选项：最多50项，每项最多20字</p>
                <div class="clear option">
                    <div class="clear" v-for="(item,key) in newForm[liFocus].detail[liDetailFocus].option" :key="key">
                        <el-input class="fl" v-model.trim.native="item.value" maxLength="20" placeholder="请输入内容"></el-input>
                        <el-button @click="changeDetailOption(key,'sub')" v-if="key!==0" class="el-icon-minus fl"></el-button>
                        <el-button @click="changeDetailOption(key,'add')" class="el-icon-plus fl"></el-button>
                    </div>
                </div>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 日期设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==6" class="setDate">
                <p class="type">日期</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">日期类型</p>
                <el-radio-group v-model="newForm[liFocus].detail[liDetailFocus].dateType">
                    <el-radio :label="1">年-月-日 &nbsp; &nbsp;时-分</el-radio><br />
                    <el-radio :label="2">年-月-日</el-radio>
                </el-radio-group>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 日期区间设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==7" class="setDateInterval">
                <p class="type">日期</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title2">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title2 && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title2)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title2" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">日期类型</p>
                <el-radio-group v-model="newForm[liFocus].detail[liDetailFocus].dateType">
                    <el-radio :label="1">年-月-日 &nbsp; &nbsp;时-分</el-radio><br />
                    <el-radio :label="2">年-月-日</el-radio>
                </el-radio-group>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 图片设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==8" class="setImage">
                <p class="type">图片</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>
                <span :class="{hide:newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)}">最多可添加9张 </span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 说明文字设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==10" class="setCaption">
                <p class="type">说明文字</p>

                <p class="caption">说明文字：100字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="100" placeholder="请输入说明文字"></el-input>
 
                <p class="caption">可以输入链接跳转地址：<span v-if="newForm[liFocus].detail[liDetailFocus].errorURL">链接地址格式有误</span></p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].content" @blur="checkFormat" placeholder="请输入链接跳转地址"></el-input>

                <p class="caption">显示</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].newWindow">（新开窗口）</el-checkbox>
            </div>

            <!-- 金额设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==11" class="setMoney">
                <p class="type">金额</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请填写金额"></el-input>
                <span>最多输入两位小数</span>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 附件设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==12" class="setAccessory">
                <p class="type">附件</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>
            </div>

            <!-- 联系人设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==13" class="setLinkMan">
                <p class="type">联系人</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">验证</p>
                <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox>

                <p class="caption">选项</p>
                <el-radio-group v-model="newForm[liFocus].detail[liDetailFocus].count">
                    <el-radio :label="'single'">只能选择1人 &nbsp; &nbsp;</el-radio>
                    <el-radio :label="'multi'">可同时选择多人</el-radio>
                </el-radio-group>
            </div>

            <!-- 计算公式设置 -->
            <div v-if="newForm[liFocus].detail[liDetailFocus].id==14" class="setEquation">
                <p class="type">计算公式</p>

                <p class="caption">标题：20字以内
                    <span class="tip" v-if="!newForm[liFocus].detail[liDetailFocus].title">标题不能为空</span>
                    <span class="tip" v-if="newForm[liFocus].detail[liDetailFocus].title && checkDetailSameName(newForm[liFocus].detail[liDetailFocus].title)">已存在相同标题</span>
                </p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].title" maxLength="20" placeholder="请输入标题"></el-input>

                <p class="caption">提示文字：20字以内</p>
                <el-input v-model.trim.native="newForm[liFocus].detail[liDetailFocus].reminder" maxLength="20" placeholder="请输入提示文字"></el-input>

                <p class="caption">计算公式</p>
                <!-- <el-input v-model="newForm[liFocus].detail[liDetailFocus].equation" @focus="showCalculateEquation" readonly placeholder="请输入计算公式"></el-input> -->
                <div class="formula">
                    <ul class="clear" @click="showCalculateEquation">
                        <!-- <li class="fl sign">{{newForm[liFocus].detail[liDetailFocus].equation}}</li> -->
                        <li :class="{
                            fl:true,
                            sign:item.type=='sign',
                            params:item.id==3||item.id==11,
                            error:item.title===undefined}" 
                            v-for="(item,key) in newForm[liFocus].detail[liDetailFocus].equation" 
                            :key="key">
                            <span v-if="item.detailIdx!=null">{{newForm[item.formIdx].title}} . </span>
                            <span v-if="item.title!==undefined">{{item.title}}</span>
                            <span v-else>参数已删</span>
                        </li>
                    </ul>
                </div>

                <!-- <p class="caption">验证</p> -->
                <!-- <el-checkbox v-model="newForm[liFocus].detail[liDetailFocus].required">（必填）</el-checkbox> -->
            </div>
        </aside>

        <!-- 中间拖放区域 -->
        <div class="form-design-second-main">
            <ul @dragover.prevent="dragover('insert',$event)" @drop="drop('insert',$event)" @dragleave="dragleave">
                <li v-if="newForm.length==0" class="empty">拖动左侧控件至此处</li>
                <li v-for="(item,key) in newForm"
                    :key="key"
                    :draggable="liDetailFocus===null"
                    @dragstart="sort(key,$event)"
                    @dragover.stop.prevent="dragover(key,$event)"
                    @drop.stop="drop(key,$event)"
                    @dragend="dragend"
                    @dragleave="dragleave"
                    @mousedown="liDetailFocus=null,liFocus=key"
                    :class="{before:key==dragoverIdx&&insertPosition=='up'&&!detailsLiHover,
                    after:key==dragoverIdx&&insertPosition=='down'&&!detailsLiHover}">
                    <div
                        :class="{active:key===liFocus&&liDetailFocus===null,noDetail:true}"
                        :style="{'pointer-events':pointerEvent?'none':'auto'}"
                        v-if="item.id!=9">
                        <!-- :class="{active:key===liFocus,insert:item==='insert'}"> -->
                        <el-button @click.stop="deleteTemplate(key)" class="el-icon-close"></el-button>

                        <!-- 单行输入框 -->
                        <div v-if="item.id==1" class="input">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                {{item.reminder}}
                                <span v-if="item.required">（必填）</span>
                            </div>
                        </div>

                        <!-- 多行输入框 -->
                        <div v-if="item.id==2" class="textarea">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                <textarea disabled :placeholder="item.reminder + (item.required?'（必填）':'')"></textarea>
                                <p>0/<span>{{item.maxLength}}</span></p>
                            </div>
                        </div>

                        <!-- 数字输入框 -->
                        <div v-if="item.id==3" class="input" type="numberInput">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                                <span v-if="item.unit">({{item.unit}})</span>
                            </span>
                            <div class="clear">
                                {{item.reminder}}
                                <span v-if="item.required">（必填）</span>
                            </div>
                        </div>

                        <!-- 单选框 -->
                        <div v-if="item.id==4" class="radio">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                {{item.reminder}} 
                                <span v-if="item.required">（必填）</span>
                                <i class="el-icon-arrow-down fr"></i>
                            </div>
                        </div>

                        <!-- 多选框 -->
                        <div v-if="item.id==5" class="checkbox">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                {{item.reminder}} 
                                <span v-if="item.required">（必填）</span>
                                <i class="el-icon-arrow-down fr"></i>
                            </div>
                        </div>

                        <!-- 日期 -->
                        <div v-if="item.id==6" class="date">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                {{item.reminder}}
                                <span v-if="item.required">（必填）</span>
                                <img src="../../../../static/image/examine/date.png" alt="日期图标">
                            </div>
                        </div>

                        <!-- 日期区间 -->
                        <div v-if="item.id==7" class="dateInterval">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                {{item.reminder}}
                                <span v-if="item.required">（必填）</span>
                                <img src="../../../../static/image/examine/date.png" alt="日期图标">
                            </div>

                            <span :title="item.title2" style="margin-top:30px">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title2}}
                            </span>
                            <div class="clear" style="margin-top:30px">
                                {{item.reminder}}
                                <span v-if="item.required">（必填）</span>
                                <img src="../../../../static/image/examine/date.png" alt="日期图标">
                            </div>
                        </div>

                        <!-- 图片 -->
                        <div v-if="item.id==8" class="image">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                                <span v-if="item.comment">{{item.comment}}</span>
                            </span>
                            <div class="clear"><i class="el-icon-plus"></i></div>
                        </div>

                        <!-- 说明文字 -->
                        <div v-if="item.id==10" class="caption">
                            <p>{{item.title}}</p>
                            <!-- <p v-if="item.title">{{item.title}}</p>
                            <p v-else>请输入说明文字</p> -->
                        </div>

                        <!-- 金额 -->
                        <div v-if="item.id==11" class="money">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">
                                {{item.reminder}}
                                <span v-if="item.required">（必填）</span>
                            </div>
                        </div>

                        <!-- 附件 -->
                        <div v-if="item.id==12" class="accessory">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                <span>{{item.title}}&nbsp;</span>
                                <p>（最多选择一个附件）</p>
                            </span>
                            <div class="clear">
                                <span>添加附件</span>
                                <div><img src="../../../../static/image/examine/accessory.png" alt="附件图标"></div>
                            </div>
                        </div>

                        <!-- 联系人 -->
                        <div v-if="item.id==13" class="linkMan">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">请选择</div>
                        </div>

                        <!-- 计算公式 -->
                        <div v-if="item.id==14" class="equation">
                            <span :title="item.title">
                                <span class="required" v-if="item.required">*</span>
                                {{item.title}}
                            </span>
                            <div class="clear">{{item.reminder}}</div>
                        </div>
                    </div>

                    <!-- 明细特有样式 -->
                    <div
                        v-else
                        :class="{active:key===liFocus&&liDetailFocus===null,detail:true}"
                        :style="{'pointer-events':pointerEvent?'none':'auto'}">
                        <el-button @click.stop="deleteTemplate(key)" class="el-icon-close"></el-button>
                        <p>{{item.title}}</p>
                        <ul style="pointer-events:auto;">
                            <li
                                v-if="item.detail.length==0"
                                @drop.stop.prevent="detailDrop($event,key)"
                                @dragover.stop.prevent="detailDragover"
                                class="addDetail">
                                可拖入多个组件（不包含明细组件
                            </li>
                            <li
                                v-else
                                v-for="(detailItem,detailKey) in item.detail"
                                :key="detailKey"
                                draggable="true"
                                @dragstart.stop="sortDetail($event,key,detailKey)"
                                @dragover.stop.prevent="detailDragover($event,key,detailKey)"
                                @drop.stop.prevent="detailDrop($event,key,detailKey)"
                                @dragend="dragend"
                                @dragleave.stop="dragleave"
                                @mousedown.stop="liFocus=key"
                                @click.stop="liDetailFocus=detailKey"
                                :class="{before:detailKey==dragoverIdx&&insertPosition=='up'&&detailsLiHover&&liFocus==key,
                                    after:detailKey==dragoverIdx&&insertPosition=='down'&&detailsLiHover&&liFocus==key}">
                                <div :class="{
                                    detailItem:true,
                                    active:key===liFocus&&liDetailFocus===detailKey}"
                                    :style="{'pointer-events':pointerEvent?'none':'auto'}">
                                    <el-button @click.stop="deleteDetailTemplate(key,detailKey)" class="el-icon-close"></el-button>

                                    <!-- 单行输入框 -->
                                    <div v-if="detailItem.id==1" class="input">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                        </div>
                                    </div>

                                    <!-- 多行输入框 -->
                                    <div v-if="detailItem.id==2" class="textarea">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            <textarea disabled :placeholder="detailItem.reminder + (detailItem.required?'（必填）':'')"></textarea>
                                            <p>0/<span>{{detailItem.maxLength}}</span></p>
                                        </div>
                                    </div>

                                    <!-- 数字输入框 -->
                                    <div v-if="detailItem.id==3" class="input" type="numberInput">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                            <span v-if="detailItem.unit">({{detailItem.unit}})</span>
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                        </div>
                                    </div>

                                    <!-- 单选框 -->
                                    <div v-if="detailItem.id==4" class="radio">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                            <i class="el-icon-arrow-down fr"></i>
                                        </div>
                                    </div>

                                    <!-- 多选框 -->
                                    <div v-if="detailItem.id==5" class="checkbox">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                            <i class="el-icon-arrow-down fr"></i>
                                        </div>
                                    </div>

                                    <!-- 日期 -->
                                    <div v-if="detailItem.id==6" class="date">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}} 
                                            <span v-if="detailItem.required">（必填）</span>
                                            <img src="../../../../static/image/examine/date.png" alt="日期图标">
                                        </div>
                                    </div>

                                    <!-- 日期区间 -->
                                    <div v-if="detailItem.id==7" class="dateInterval">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                            <img src="../../../../static/image/examine/date.png" alt="日期图标">
                                        </div>

                                        <span :title="detailItem.title2" style="margin-top:30px">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title2}}
                                        </span>
                                        <div class="clear" style="margin-top:30px">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                            <img src="../../../../static/image/examine/date.png" alt="日期图标">
                                        </div>
                                    </div>

                                    <!-- 图片 -->
                                    <div v-if="detailItem.id==8" class="image">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                            <span v-if="detailItem.comment">{{detailItem.comment}}</span>
                                        </span>
                                        <div class="clear"><i class="el-icon-plus"></i></div>
                                    </div>

                                    <!-- 说明文字 -->
                                    <div v-if="detailItem.id==10" class="caption">
                                        <p>{{detailItem.title}}</p>
                                        <!-- <p v-if="detailItem.title">{{detailItem.title}}</p>
                                        <p v-else>请输入说明文字</p> -->
                                    </div>

                                    <!-- 金额 -->
                                    <div v-if="detailItem.id==11" class="money">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">
                                            {{detailItem.reminder}}
                                            <span v-if="detailItem.required">（必填）</span>
                                        </div>
                                    </div>

                                    <!-- 附件 -->
                                    <div v-if="detailItem.id==12" class="accessory">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            <span>{{detailItem.title}}&nbsp;</span>
                                            <p>（最多选择一个附件）</p>
                                        </span>
                                        <div class="clear">
                                            <span>添加附件</span>
                                            <div><img src="../../../../static/image/examine/accessory.png" alt="附件图标"></div>
                                        </div>
                                    </div>

                                    <!-- 联系人 -->
                                    <div v-if="detailItem.id==13" class="linkMan">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">请选择</div>
                                    </div>

                                    <!-- 计算公式 -->
                                    <div v-if="detailItem.id==14" class="equation">
                                        <span :title="detailItem.title">
                                            <span class="required" v-if="detailItem.required">*</span>
                                            {{detailItem.title}}
                                        </span>
                                        <div class="clear">{{detailItem.reminder}}</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="cushion"></div>
                        <el-button type="primary" icon="el-icon-plus">{{item.addDetail}}</el-button>
                    </div>
                </li>
                <li v-if="prePosition" class="insert"></li>
            </ul>
        </div>

        <!-- 计算公式弹窗 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'编辑计算公式'"
            :visible.sync="computedEquation"
            width="550px">
            <div class="edit">

                <div class="textarea">
                    <div>
                        <template v-for="(item,key) in precalculatingEquation">
                            <span 
                                :class="{
                                    obj:!item.type,
                                    sign:item.type=='sign',
                                    num:item.type=='num',
                                    mult:item.mult
                                }"
                                v-if="item.title!==undefined"
                                :title="item.title"
                                :key="key">
                                <span v-if="item.detailIdx!=null">{{newForm[item.formIdx].title}} . </span>
                                {{item.title}}
                            </span>
                            <span v-else class="obj error">参数已删</span>
                        </template>
                    </div>
                    <i @click="deleteParams" class="delete pointer"><i class="arrow-left"></i><i class="el-icon-close"></i></i>
                    <span @click="clearAllParams" class="clear pointer">清空</span>
                </div>
                <div class="object clear">
                    <strong class="fl" title="· 表单控件库中为【数字输入框】及【金额】的控件">i</strong>
                    <span class="fl">计算对象：</span>
                    <span v-if="calculatingParameter.length==0" style="color: #ccc">没有可提供计算的参数</span>
                    <div class="params fl" v-if="calculatingParameter.length>0">
                        <span @click="inputParams(item)" :title="item.title" class="fl pointer" v-for="(item,key) in calculatingParameter" :key="key">
                            <span v-if="item.detailIdx!=null">{{newForm[item.formIdx].title}} . </span>{{item.title}}
                        </span>
                    </div>
                </div>
                <div class="compute-sign clear">
                    <span class="fl">计算符号：</span>
                    <el-button @click="inputSign('+')" class="fl">+</el-button>
                    <el-button @click="inputSign('-')" class="fl">-</el-button>
                    <el-button @click="inputSign('*')" class="fl" style="line-height:40px">*</el-button>
                    <el-button @click="inputSign('/')" class="fl">/</el-button>
                    <el-button @click="inputSign('(')" class="fl">(</el-button>
                    <el-button @click="inputSign(')')" class="fl">)</el-button>
                </div>
                <div class="numeric-keyad clear">
                    <span class="fl">数字键盘：</span>
                    <div class="fl">
                        <el-button @click="inputNum('1')">1</el-button>
                        <el-button @click="inputNum('2')">2</el-button>
                        <el-button @click="inputNum('3')">3</el-button>
                        <el-button @click="inputNum('4')">4</el-button>
                        <el-button @click="inputNum('5')">5</el-button>
                        <el-button @click="inputNum('6')">6</el-button>
                        <el-button @click="inputNum('7')">7</el-button>
                        <el-button @click="inputNum('8')">8</el-button>
                        <el-button @click="inputNum('9')">9</el-button>
                        <el-button @click="inputNum('0')">0</el-button>
                        <el-button @click="inputNum('.')">.</el-button>
                    </div>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="computedEquation=false">取消</el-button>
                <el-button @click="checkEquation" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    export default {
        name:'second',
        props:['examineModel'],
        data(){
            return {
                prePosition:false,   // 当被拖拽组件hover在可放置的组件上时值为true
                insertPosition:'up',   // 存放被拖拽组件hover在li上时的插入位置，上放为‘up’，下方为‘down’
                liFocus:null,   // 存放被选中的li的key值
                liDetailFocus:null,   // 存放被选中的明细中牟li的key值
                newForm:[],
                sortIdx:null,   // newForm数组中被拖拽重新排序的索引
                sortDetailIdx:null,   // 明细组件中detail数组中被拖拽组件的索引
                computedEquation:false,   // 设计计算公式弹窗
                calculatingParameter:[],   // 提供计算公式的可计算组件的数组（参数）
                precalculatingEquation:[],   // 用于存放设计计算公式时预备输入的数组；
                sameName:[],   // 外层ul存放有多少个位置是同名的数量
                detailSameName:[],   // 里层ul存放有多少个位置是同名的数量
                dragoverIdx:null,   // 被拖拽组件hover时的li索引值
                pointerEvent:false,   // 记录li的dragover事件是否被触发的状态
                detailsLiHover:false,   // 当明细组件中的li被dragover时值为true，其他情况为false
                timestampID:null   // 初次提交审批单时生成的时间戳，以秒为单位
            }
        },
        created(){
            
        },
        watch:{
            examineModel:{
                handler(newVal,oldVal){
                    if(newVal  && this.$route.query.model == 'no'){

                        this.newForm = newVal.form_set.map(item=>item);

                        this.getDynamicParams();

                    }
                    else if(newVal  && this.$route.query.model == 'yes'){

                        let arr = newVal.form_set.map(item=>item);

                        // 清除生成模板时的时间戳
                        arr.forEach(item=>{
                            if(item.timeStampID){
                                delete item.timeStampID
                            }

                            if(item.detail){
                                item.detail.forEach(item2=>{
                                    if(item2.timeStampID){
                                        delete item2.timeStampID
                                    }
                                })
                            }

                        });

                        this.newForm = arr;

                        this.getDynamicParams();

                    }
                    
                },
                immediate:true
            }
        },
        computed:{
            // 右侧标题框显示时检测时是否有同名并报错（命名空间为外层的明细组件）
            checkSameName(){

                return title => {
                    var arr = this.newForm,liFocus = this.liFocus,initRepeatName=title;

                    for(var i=0;i<arr.length;i++){
                        // 如果for循环中出现除本身以外的同名则执行
                        if(liFocus!=i && arr[i].title==title){
                            if(!this.sameName.includes(title)){
                                initRepeatName = title;
                                this.sameName.push(title);
                            }
                            return true;
                        }
                    }

                    // 如果for循环中没有出现除本身以外的同名则执行
                    var removeIdx = this.sameName.indexOf(title);
                    var removeIdx2 = this.sameName.indexOf(initRepeatName);
                    if(removeIdx>=0){
                        this.sameName.splice(removeIdx,1);
                    }else if(removeIdx2>=0){
                        this.sameName.splice(removeIdx2,1);
                    }
                    return false;
                }
            },

            // 右侧标题框显示时检测时是否有同名并报错（命名空间为每一个单独的明细组件）
            checkDetailSameName(){
                return (title) => {
                    var arr = this.newForm[this.liFocus].detail,liDetailFocus = this.liDetailFocus,initRepeatName=title;

                    for(var i=0;i<arr.length;i++){
                        // 如果for循环中出现除本身以外的同名则执行
                        if(liDetailFocus!=i && arr[i].title==title){
                            if(!this.detailSameName.includes(title)){
                                initRepeatName = title;
                                this.detailSameName.push(title);
                            }
                            return true;
                        }
                    }

                    // 如果for循环中没有出现除本身以外的同名则执行
                    var removeIdx = this.detailSameName.indexOf(title);
                    var removeIdx2 = this.detailSameName.indexOf(initRepeatName);
                    if(removeIdx>=0){
                        this.detailSameName.splice(removeIdx,1);
                    }else if(removeIdx2>=0){
                        this.detailSameName.splice(removeIdx2,1);
                    }
                    return false;
                }
            }
        },  
        methods:{
            // 动态绑定计算公式中的计算参数属性
            getDynamicParams(){
                let arr = this.newForm,that = this;

                // 获取动态计算参数属性的方法
                function getParams(arr){
                    for(let i=0;i<arr.length;i++){
                        if(arr[i].id){
                            arr[i] = arr[i].detailIdx === null? that.newForm[arr[i].formIdx] : that.newForm[arr[i].formIdx].detail[arr[i].detailIdx];
                        }
                    }
                }

                for(let i=0;i<arr.length;i++){
                    if(arr[i].id == 14){
                        getParams(arr[i].equation);
                    }

                    if(arr[i].id == 9){
                        let detail = arr[i].detail;

                        for(let i=0;i<detail.length;i++){
                            if(detail[i].id == 14){
                                getParams(detail[i].equation);
                            }
                        }
                    }
                }
            },
            // 检测本页是否有修改过信息
            checkStatus(){
                if(this.newForm.length!=0){
                    return false
                }else{
                    return true
                }
            },
            // 发布时检测表单组件有没有重复的名字
            checkRepeatName(){
                // 重置sameName
                this.sameName = [];
                var arr = this.newForm;

                for(var i=0;i<arr.length-1;i++){
                    for(var j=i+1;j<arr.length;j++){
                        if(arr[i].title==arr[j].title && !this.sameName.includes(arr[i].title)){
                            this.sameName.push(arr[i].title)
                        }
                    }
                }
            },
            // ====================以下是设置被拖拽时携带的参数====================
                // 排序时触发的参数 （此为外层ul组件开始被拖拽时执行的方法）
                sort(key,e){
                    e.dataTransfer.setData('sort',true);

                    this.sortIdx = key;
                 
                },

                // 单行输入框
                insertInput(e){
                    var data = {    
                            id:1,
                            title:'单行输入框',   // 输入框标题
                            content:'',   // 用户输入的内容
                            reminder:'请填写',   // 提示文字
                            maxLength:100,   // 最大输入字数
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 多行输入框
                insertTextarea(e){
                    var data = {    
                            id:2,
                            title:'多行输入框',   // 输入框标题
                            content:'',   // 用户输入的内容
                            reminder:'请填写',   // 提示文字
                            maxLength:1000,   // 最大输入字数
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 数字输入框
                insertNumberInput(e){
                    var data = {    
                            id:3,
                            title:'数字输入框',   // 输入框标题
                            content:'',   // 用户输入的内容
                            reminder:'请填写',   // 提示文字
                            decimal:5,   // 最多输入几位小数
                            unit:'',   // 单位
                            // maxLength:1000,   // 最大输入字数
                            required:false,   // 是否必填
                            // type:'computeParams'，   // 计算公式的类型（金额和数字输入框特有）
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 单选框
                insertRadio(e){
                    var data = {    
                            id:4,
                            title:'单选框',   // 输入框标题
                            content:'',   // 用户输入的内容
                            reminder:'请选择',   // 提示文字
                            option:[{value:''}],   // 存放备选项的数组
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 多选框
                insertCheckbox(e){
                    var data = {    
                            id:5,
                            title:'多选框',   // 输入框标题
                            content:[],   // 用户输入的内容
                            reminder:'请选择',   // 提示文字
                            option:[{value:''}],   // 存放备选项的数组
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 日期
                insertDate(e){
                    var data = {    
                            id:6,
                            title:'日期',   // 输入框标题
                            content:'',   // 用户输入的内容
                            dateType:2,   // 日期的格式，目前只有两种
                            reminder:'请选择',   // 提示文字
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data); 
                },
                // 日期区间
                insertDateInterval(e){
                    var data = {    
                            id:7,
                            title:'开始时间',   // 输入框标题
                            title2:'结束时间',   // 输入框标题2
                            content:'',   // 用户输入的内容
                            content2:'',   // 用户输入的内容2
                            dateType:2,   // 日期的格式，目前只有两种
                            reminder:'请选择',   // 提示文字
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data); 
                },
                // 图片
                insertImage(e){
                    var data = {    
                            id:8,
                            title:'上传图片',   // 输入框标题
                            content:[],   // 用户上传文件组成的数组
                            comment:'(最多选择9张图片)',   // 提示
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data); 
                },
                // 明细
                insertDetail(e){
                    var data = {    
                            id:9,
                            title:'明细',   // 输入框标题
                            detail:[],   // 存放内部新增的组件
                            addDetail:'增加明细',  // 增加明细 
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data); 
                },
                // 说明文字
                insertCaption(e){
                    var data = {    
                            id:10,
                            title:'请填写说明文字',   // 输入框标题
                            content:'https://',   // 增加明细 
                            newWindow:false,   // 新开窗口时为true 
                            errorURL:false,   // 验证输入的网址格式是否符合要求
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data); 
                },
                // 金额
                insertMoney(e){
                    var data = {    
                            id:11,
                            title:'金额（元）',   // 输入框标题
                            content:'',   // 用户输入的内容
                            reminder:'请填写',   // 提示文字
                            decimal:2,   // 最多输入几位小数
                            required:false,   // 是否必填
                            // type:'computeParams'   // 计算公式的类型（金额和数字输入框特有）
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 附件
                insertAccessory(e){
                    var data = {    
                            id:12,
                            title:'上传附件',   // 输入框标题
                            content:[],   // 用户输入的内容
                            comment:'(最多选择1个附件)',   // 提示
                            process: 100,   // 上传进度
                            required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 联系人
                insertLinkMan(e){
                    var data = {    
                            id:13,
                            title:'联系人',   // 输入框标题
                            content:[],   // 用户选择用户组恒的数组
                            required:false,   // 是否必填
                            count:'single',   // 可选择人数，single只能选择1人，multi可同时选择多人
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
                // 计算公式
                insertEquation(e){
                    var data = {    
                            id:14,
                            title:'计算公式',   // 输入框标题
                            content:'',   // 用户输入的内容
                            reminder:'自动计算数值',   // 提示文字
                            equation:[{type:'equal',title:'计算公式 ='}],   // 计算公式
                            // required:false,   // 是否必填
                            formIdx:null,   // 存放当前组件在newForm数组中的索引值
                            detailIdx:null   // 若当前组件在明细组件中则存放当前明细组件中数组的索引值
                        }

                    data = JSON.stringify(data);

                    e.dataTransfer.setData('type',data);
                },
            // ====================以上是设置被拖拽时携带的参数====================
           

            // ====================以下是拖拽开始后执行的方法====================
                // dragenter(){
                    // this.prePosition = true;
                // },
                dragleave(e){
                    // this.prePosition = false;
                    this.dragoverIdx = null;

                    this.prePosition = false;

                    this.liFocus = null;
                },
                dragover(val,e){
                    e.dataTransfer.dropEffect = 'move';

                    this.pointerEvent = true;

                    this.liDetailFocus = null;

                    // 当val=='insert'时代表被拖拽组件hover在ul上，则在数组的最后端显示插入UI，当val不为"insert"时的值为被hover的li的索引值,且每次要先清一次数组中的insert，确保insert是唯一的
                    // this.newForm = this.newForm.filter(item=>item!='insert');
                    // this.prePosition = true;

                    if(val==='insert'){

                        this.prePosition = true;

                    }else{
                        this.prePosition = false;
                        
                        // 当前鼠标hover在源对象上的Y值
                        var currentY = e.layerY;

                        // 当前鼠标hover的源对象的高度
                        var currentHeight = e.target.offsetHeight;

                        if(currentY < currentHeight/2){
                            this.insertPosition = 'up';
                        }else{
                            this.insertPosition = 'down';
                        }

                        this.detailsLiHover = false;

                        this.dragoverIdx = val;
                    }

                },
                // 检查外层组件有没有重复的title
                checkTitle(title){
                    // 当newForm为空数组时
                    if(this.newForm.length==0){
                        return title;
                    }

                    var arr = this.newForm,
                        init = 2,
                        reg = /\(\d\)$/,
                        title = title.replace(reg,''),
                        initName = true;

                    // 先检测有没有去掉括号后的原名字，若循环后没有直接返回原名字，反则执行check函数
                    for(var i=0;i<arr.length;i++){
                        if(title==arr[i].title){
                            initName = false;
                            break
                        }
                    }

                    if(initName){
                        return title;
                    }



                    function check(title){
                       
                        for(var i=0;i<arr.length;i++){
                            if(arr[i].title == title){
                                title = reg.test(title)? title.replace(reg,`(${init})`) : title + '(2)';
                                init++
                                return check(title)
                            }
                        }
                        return title
                    }

                    return check(title);

                },
                // 放置拖拽组件时执行
                drop(val,e){
                    var sort = e.dataTransfer.getData('sort');   // 若存在sort则说明被拖拽的组件是在外层ul中
                    var detail = e.dataTransfer.getData('detail');   // 若detail不为空则表明被拖拽的组件是detail里的组件，反则是外层ul里的li组件 

                    if(sort && !detail){
                        // 获取到被拖拽排序的li
                        var sortItem = this.newForm[this.sortIdx];
                        // var sortItem = this.newForm.splice(this.sortIdx,1)[0];

                        // 如果是hover在ul上，则放在newForm的最后一个位置
                        if(val==='insert'){

                            this.newForm.push(sortItem);

                            this.newForm.splice(this.sortIdx,1);

                            this.liFocus = this.newForm.length-1;

                        }else{

                            var key = this.insertPosition == 'up'? val : val + 1;

                            this.newForm.splice(key,0,sortItem);

                            if(this.sortIdx>val){

                                this.newForm.splice(this.sortIdx+1,1);

                                this.liFocus = key;

                            }else{

                                this.newForm.splice(this.sortIdx,1);

                                this.liFocus = key-1;

                            }

                        }

                        // 每次排序都要检测newForm中有没有明细组件，如果则给明细中的组件重置detailIdx值
                        this.newForm.forEach((item,idx)=>{
                            if(item.id==9){
                                item.detail.forEach((detailItem,detailIdx)=>{
                                    detailItem.detailIdx = idx;
                                })
                            }
                        })

                    }else if(detail && !sort){

                        var detailItem = this.newForm[this.sortIdx].detail[this.sortDetailIdx];

                        // 若是从明细组件中拖拽出来的，则重置对象中的detailIdx属性
                        detailItem.detailIdx = null;

                        // 先检测一下newForm数组中有没有重名的，若有则自动重命名，反则跳过
                        var title = this.checkTitle(detailItem.title);

                        detailItem.title = title;

                        // 如果是hover在ul上，则放在newForm的最后一个位置
                        if(val==='insert'){

                            this.newForm.push(detailItem);

                            this.liFocus = this.newForm.length - 1;

                        }else{

                            var key = this.insertPosition == 'up'? val : val + 1;

                            this.newForm.splice(key,0,detailItem);

                            this.liFocus = key;

                            if(key<=this.sortIdx){

                                this.sortIdx++

                            }

                        }

                        this.newForm[this.sortIdx].detail.splice(this.sortDetailIdx,1);
                        
                        this.sortDetailIdx = null;

                        // 所有从明细组件中拖出来的组件都要把detailIdx重置为null
                        this.newForm[this.liFocus].detailIdx = null;

                    }else{

                        var data = e.dataTransfer.getData('type');
                        
                        data = JSON.parse(data);

                        if(val==='insert'){
                            // 先检测一下newForm数组中有没有重名的，若有则自动重命名，反则跳过
                            var title = this.checkTitle(data.title);

                            data.title = title;

                            this.newForm.push(data)

                            this.liFocus = this.newForm.length-1;
                        }else{
                            // 先检测一下newForm数组中有没有重名的，若有则自动重命名，反则跳过
                            var title = this.checkTitle(data.title);

                            data.title = title;

                            var key = this.insertPosition == 'up'? val : val+1;

                            this.newForm.splice(key,0,data)

                            this.liFocus = key;

                        }

                        // 每次排序都要检测newForm中有没有明细组件，如果则给明细中的组件重置detailIdx值
                        this.newForm.forEach((item,idx)=>{
                            if(item.id==9){
                                item.detail.forEach((detailItem,detailIdx)=>{
                                    detailItem.detailIdx = idx;
                                })
                            }
                        })

                    }

                    // 重排所有组件的formIdx和detailIdx
                    this.resetIdx();

                },
                // 拖拽结束时的方法
                dragend(){

                    this.dragoverIdx = null;
                    
                    this.prePosition = false;

                    this.pointerEvent = false;

                    this.detailsLiHover = false;

                    // this.newForm = this.newForm.filter(item=>item!='insert');

                    // 判断liFocus有否超出newForm的长度，若没有则跳过，反则检测newForm长度是否为0
                    // if(this.liFocus>=this.newForm.length){
                        // this.liFocus = this.newForm.length? this.newForm.length-1 : null;
                    // }

                },
            // ====================以上是拖拽开始后执行的方法====================

                // 重排所有组件的formIdx和detailIdx
                resetIdx(){
                    this.newForm.forEach((item,idx)=>{
                        item.formIdx = idx;
                        item.detailIdx = null;

                        if(item.id===9){
                            delete item.detailIdx;

                            item.detail.forEach((detailItem,detailIdx)=>{
                                detailItem.formIdx = idx;
                                detailItem.detailIdx = detailIdx;
                            })
                        }

                    })
                },

            // ====================以下是明细组件拖拽开始后执行的方法====================
            
                // 开始拖拽detail组件中的li时触发的方法
                sortDetail(e,key,detailKey){

                    e.dataTransfer.setData('detail',true);

                    this.sortIdx = key;

                    this.sortDetailIdx = detailKey;

                },
                // 删除明细组件中ul选中的组件
                deleteDetailTemplate(key,detailKey){
                    // 获取被删除组件的id
                    var id = this.newForm[key].detail[detailKey].id;

                    if(id==3 || id==11){
                        var obj = this.newForm[key].detail[detailKey];
                        for(var idx in obj){
                            if(idx != "id"){
                                delete obj[idx]
                            }
                        } 
                    }

                    this.newForm[key].detail.splice(detailKey,1);

                    this.liFocus = null; 

                    this.liDetailFocus = null; 

                    // 删除后重排一次明细组件中的detailIdx
                    var detailArr = this.newForm[key].detail;
                    detailArr.forEach((item,idx2)=>{
                        item.detailIdx = idx2;
                    });

                },
                detailDragover(e,key,detailKey){
                    e.dataTransfer.dropEffect = 'copy';

                    // 当前鼠标hover在源对象上的Y值
                    var currentY = e.layerY;

                    // 当前鼠标hover的源对象的高度
                    var currentHeight = e.target.offsetHeight;

                    if(currentY < currentHeight/2){
                        this.insertPosition = 'up';
                    }else{
                        this.insertPosition = 'down';
                    }

                    this.detailsLiHover = true;

                    if(typeof detailKey=='number'){
                        this.dragoverIdx = detailKey;
                    }

                    this.liFocus = key;

                },
                // 细节组件中被放置组件时触发的方法
                detailDrop(e,key,detailKey){

                    var sort = e.dataTransfer.getData('sort');   // 若type不存在且存在sort则表明被放置的组件是做排序操作
                    var type = e.dataTransfer.getData('type');   // 若sort不存在且存在type则表明被放置的组件是新增的
                    var detail = e.dataTransfer.getData('detail');   // 若detail不为空则表明被拖拽的组件是detail里的组件，反则是外层ul里的li组件

                    // 若被放置的组件为明细组件则return
                    if(type && JSON.parse(type).id==9 || sort && this.newForm[this.sortIdx].id==9){
                        return
                    }

                    // 若存在detail，则做detail里组件排序操作
                    if(detail){
                        // 若被拖拽和被放置组件都为同一个则不做操作
                        if(this.sortIdx==key && this.sortDetailIdx==detailKey) return;

                        var sortDetailItem = this.newForm[this.sortIdx].detail[this.sortDetailIdx];

                        if(this.insertPosition=='up'){

                            this.newForm[key].detail.splice(detailKey,0,sortDetailItem)

                            // 判断是否在同一个明细里排序做不同的操作
                            if(this.sortIdx==key){

                                if(detailKey > this.sortDetailIdx ){

                                   this.newForm[key].detail.splice(this.sortDetailIdx,1);

                                   this.liDetailFocus = detailKey - 1;

                                }else{

                                    this.newForm[key].detail.splice(this.sortDetailIdx+1,1);

                                    this.liDetailFocus = detailKey;

                                }

                            }else{
                                // 若不再同一个明细里则直接删除
                                this.newForm[this.sortIdx].detail.splice(this.sortDetailIdx,1)

                                this.liDetailFocus = detailKey;
                                
                            }

                            this.liFocus = key;

                            // 若不是在同一个明细组件中排序则检测在同一个明细组件中是否有同名，若有则修改名称
                            if(this.sortIdx!=key){

                                this.newForm[key].detail[this.liDetailFocus].title = this.checkDetailTitle(key,this.newForm[key].detail[this.liDetailFocus].title,this.liDetailFocus);

                            }

                        }else{

                            this.newForm[key].detail.splice(detailKey+1,0,sortDetailItem)

                            // 判断是否在同一个明细里排序做不同的操作
                            if(this.sortIdx==key){

                                if(detailKey > this.sortDetailIdx ){

                                   this.newForm[key].detail.splice(this.sortDetailIdx,1);

                                   this.liDetailFocus = detailKey;

                                }else{

                                    this.newForm[key].detail.splice(this.sortDetailIdx+1,1);

                                    this.liDetailFocus = detailKey + 1;

                                }

                            }else{

                                // 若不再同一个明细里则直接删除
                                this.newForm[this.sortIdx].detail.splice(this.sortDetailIdx,1)

                                this.liDetailFocus = detailKey + 1;
                                
                            }

                            // 若不是在同一个明细组件中排序则检测在同一个明细组件中是否有同名，若有则修改名称
                            if(this.sortIdx!=key){

                                this.newForm[key].detail[this.liDetailFocus].title = this.checkDetailTitle(key,this.newForm[key].detail[this.liDetailFocus].title,this.liDetailFocus);

                            }
                            
                        }

                    }
                    // 若不存在detail，则做插入外来组件操作
                    else{

                        if(sort){
                                
                            var newItem = this.newForm[this.sortIdx];

                            // 如果detailKey为undefined则是此明细的第一个组件，直接插入detail数组中就可以了
                            if(detailKey!==undefined){

                                if(this.insertPosition=='up'){

                                    this.newForm[key].detail.splice(detailKey,0,newItem);

                                    this.liDetailFocus = detailKey;

                                }else{

                                    this.newForm[key].detail.splice(detailKey+1,0,newItem);

                                    this.liDetailFocus = detailKey + 1;

                                }

                            }else{

                                this.newForm[key].detail.push(newItem);

                                this.liDetailFocus = this.newForm[key].detail.length - 1;

                            }

                            // 当detail里的ul成功插入新组件时删除新组建在外层ul的位置
                            this.newForm.splice(this.sortIdx,1);

                            if(this.sortIdx>key){

                                this.liFocus = key;

                            }else{

                                this.liFocus = key - 1;

                            }
             

                            // 检测在同一个明细组件中是否有同名，若有则修改名称
                            this.newForm[this.liFocus].detail[this.liDetailFocus].title = this.checkDetailTitle(this.liFocus,this.newForm[this.liFocus].detail[this.liDetailFocus].title,this.liDetailFocus);

                        }else if(type){

                            var newItem = JSON.parse(type);

                            // 此为添加第一个明细组件中子组件的操作
                            if(detailKey===undefined){

                                this.newForm[key].detail.push(newItem);

                                this.liDetailFocus = this.newForm[key].detail.length - 1;

                            }else{

                                if(this.insertPosition=='up'){

                                    this.newForm[key].detail.splice(detailKey,0,newItem);

                                    this.liDetailFocus = detailKey;

                                }else{

                                    this.newForm[key].detail.splice(detailKey+1,0,newItem);

                                    this.liDetailFocus = detailKey + 1;

                                }

                                // 检测在同一个明细组件中是否有同名，若有则修改名称
                                this.newForm[key].detail[this.liDetailFocus].title = this.checkDetailTitle(key,this.newForm[key].detail[this.liDetailFocus].title,this.liDetailFocus);

                            }

                            this.liFocus = key;

                        }

                    }

                    // 所有被放置到明细组件中的组件都要把detailIdx重置为当前明细组件的索引值
                    this.newForm[this.liFocus].detail[this.liDetailFocus].detailIdx = this.liFocus;

                    // 重排所有组件的formIdx和detailIdx
                    this.resetIdx();

                },
                // 检查明细组件中有没有重复的title
                checkDetailTitle(key,title,detailKey){
                    // return title
                    // 当newForm为数组长度小于等于1时
                    var reg = /\(\d\)$/;
                    
                    if(this.newForm[key].detail && this.newForm[key].detail.length<=1){
                        return title.replace(reg,'');
                    }

                    var arr = this.newForm[key].detail,
                        init = 2,
                        title = title.replace(reg,''),
                        initName = true;

                    // 先检测有没有去掉括号后的原名字，若循环后没有直接返回原名字，反则执行check函数
                    for(var i=0;i<arr.length;i++){
                        if(title==arr[i].title){
                            initName = false;
                            break
                        }
                    }

                    if(initName){
                        return title;
                    }

                    function check(title){
                        for(var i=0;i<arr.length;i++){

                            if(i==detailKey) continue 

                            if(arr[i].title == title){
                                title = reg.test(title)? title.replace(reg,`(${init})`) : title + '(2)';
                                init++
                                return check(title)
                            }
                        }
                        return title
                    }

                    return check(title);

                },
                
            // ====================以上是明细组件拖拽开始后执行的方法====================

            // 删除外层ul选中的组件
            deleteTemplate(key){
                // 删除组件前先检测是否金额或数字输入框组件，若是则先清空id意外的键值对再做删除处理
                var id = this.newForm[key].id;

                if(id==3 || id==11){
                    var obj = this.newForm[key];
                    for(var idx in obj){
                        if(idx != "id"){
                            delete obj[idx]
                        }
                    } 
                }

                this.newForm.splice(key,1);

                // 重排所有组件的formIdx和detailIdx
                this.resetIdx();

                // 首先判断liFocus有否超出newForm的长度，若没有则跳过，反则检测newForm长度是否为0
                if(this.liFocus>=this.newForm.length){
                    this.liFocus = this.newForm.length? this.newForm.length-1 : null;
                    return 
                }

                // 若liFocus>key,为保持选中的li不变所以-1
                if(this.liFocus>key){
                    this.liFocus -= 1;
                }

            },
            // 增加或者减少单(多)选框的option (适用于外层组件的单(多)选框)
            changeOption(key,type){
                if(type=='add'){
                    // 限制最多添加50项
                    if(this.newForm[this.liFocus].option.length>=50){
                        this.$message({
                            message: '最多添加50项',
                            type: 'warning'
                        });
                        return 
                    }
                    this.newForm[this.liFocus].option.push({value:''});
                }else{
                    this.newForm[this.liFocus].option.splice(key,1);
                }
            },
            // 增加或者减少单(多)选框的option (适用于明细层组件的单(多)选框)
            changeDetailOption(key,type){
                if(type=='add'){
                    // 限制最多添加50项
                    if(this.newForm[this.liFocus].detail[this.liDetailFocus].option.length>=50){
                        this.$message({
                            message: '最多添加50项',
                            type: 'warning'
                        });
                        return 
                    }
                    this.newForm[this.liFocus].detail[this.liDetailFocus].option.push({value:''});
                }else{
                    this.newForm[this.liFocus].detail[this.liDetailFocus].option.splice(key,1);
                }
            },
            // 检验说明文字中输入的网址格式 
            checkFormat(){
                // 声明验证规则
                var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;

                var URL = this.newForm[this.liFocus].content;

                // 如果输入网址没用通过验证则执行
                if(reg.test(URL)){
                    this.newForm[this.liFocus].errorURL = false;
                }else{
                    this.newForm[this.liFocus].errorURL = true;
                }
            },

            // ====================以下是计算公式里的方法====================
                // 显示计算属性和遍历可供计算参数的方法
                showCalculateEquation(){
                    this.calculatingParameter = [];

                    this.newForm.forEach(item=>{

                        if(item.id==3 || item.id==11){

                            this.calculatingParameter.push(item)

                        }else if(item.id==9){

                            item.detail.forEach(item=>{
                                if(item.id==3 || item.id==11){
                                    this.calculatingParameter.push(item)
                                }
                            });

                        }

                    });

                    // 此处为判断是否明细中的计算公式组件
                    if(typeof this.liDetailFocus=='number'){

                        this.precalculatingEquation = this.newForm[this.liFocus].detail[this.liDetailFocus].equation.map(item=>item);

                    }else{

                        this.precalculatingEquation = this.newForm[this.liFocus].equation.map(item=>item);

                    }

                    this.computedEquation = true;
                },
                // 插入计算对象
                inputParams(obj){
                    var lastVal = this.precalculatingEquation[this.precalculatingEquation.length-1];
                    
                    if(lastVal.type=='num' || lastVal.title==')' || lastVal.type==undefined || lastVal.id){
                        return
                    }

                    this.precalculatingEquation.push(obj);
                },
                // 插入运算符号
                inputSign(sign){
                    var lastVal = this.precalculatingEquation[this.precalculatingEquation.length-1];

                    // 当输入原始符号为'('且最后一个对象不为加减乘除或'='时则return
                    if(sign=="(" && lastVal.bracket!==false && lastVal.type!='equal'){
                        return 
                    }

                    // 当第一个输入的值为运算符号且不为'('时则return
                    if(lastVal.type=='equal' && sign!='(' && lastVal.type=='equal' && sign!='-'){
                        return
                    }

                    // 当最后一个对象为运算符号且为加减乘除时，新增符号若非'('都不能添加
                    if(lastVal.type=='sign' && !lastVal.bracket){
                        if(sign!='('){
                            return
                        }
                    }
                    // 当最后一个对象为运算符号且为'('时，不能新增运算符号，‘-’除外
                    else if(lastVal.title=='(' && sign!=='-'){
                        return
                    }
                    // 当最后一个对象为运算符号且为')'时，新增符号若非'('时都能添加
                    else if(lastVal.title==')'){
                        if(sign=='(' || sign==')'){
                            return
                        }
                    }

                    // 组装新的运算符号对象
                    var newSign = {
                        type:'sign',   // 类型
                        bracket:false,   // 是否加减乘除
                        title:sign
                    }

                    if(sign=='*'){
                        newSign.mult = true;
                    }

                    if(sign=='(' || sign==')'){
                        newSign.bracket = true;
                    }

                    this.precalculatingEquation.push(newSign);
                },
                // 插入运算数字
                inputNum(num){
                    var lastVal = this.precalculatingEquation[this.precalculatingEquation.length-1];
                    
                    // 如果最后一个对象类型为undefined或title为')'时，只能加运算符号不能直接添加数字
                    if(lastVal.type==undefined || lastVal.title==')'){
                        return
                    }

                    // 如果输入运算符号为'.'(小数点)时则分类判断情况
                    if(num=='.'){
                        if(lastVal.type=='equal' || lastVal.type!='num'){
                            return
                        }

                        if(lastVal.title=='.'){
                            return
                        }

                        // 获取数组中最后一个'.'（小数点）的索引值，若两者之间没有只有数字则return
                        var lastDotIdx,arr = deep_clone(this.precalculatingEquation);

                        arr.reverse();
                        for(var i=0;i<arr.length;i++){
                            if(arr[i].title=='.'){
                                lastDotIdx = i;
                                break
                            }
                        }

                        if(lastDotIdx!==undefined){
                            // 截取arr从最后一个小数点索引开始一直至最后的数组
                            var newArr = arr.slice(0,lastDotIdx),allNum = true;

                            for(var i=0;i<newArr.length;i++){
                                if(newArr[i].type!=='num'){
                                    allNum = false;
                                    break;
                                }
                            }

                            // 当循环完之后allNum仍然为true则return
                            if(allNum){
                                return   
                            }
                        }
                    }

                    // 防止除'0.XXX'等小数以外以0开头的数字处理
                    if(num=='0'){
                        var lastDotIdx2,arr2 = deep_clone(this.precalculatingEquation);

                        arr2.reverse();
                        for(var i=0;i<arr2.length;i++){
                            if(arr2[i].type!='num'){
                                lastDotIdx2 = i;
                                break;
                            }
                        }

                        if(lastDotIdx2!==undefined){
                            // 截取当前数字的第一位数字，如果是undefined则代表现在输入的是第一位数字
                            var firstNum = arr2[lastDotIdx2-1],secondNum = arr2[lastDotIdx2-2];

                            // 当输入‘0’时已经存在首位数字且为0则return
                            if(firstNum!==undefined && firstNum.title=='0'){
                                if(!secondNum ){
                                    return
                                }
                            }
                        }
                    }else if(num!='.'){
                        var lastDotIdx3,arr3 = deep_clone(this.precalculatingEquation);

                        arr3.reverse();
                        for(var i=0;i<arr3.length;i++){
                            if(arr3[i].type!='num'){
                                lastDotIdx3 = i;
                                break;
                            }
                        }

                        if(lastDotIdx3!==undefined){
                            // 截取当前数字的第一位数字，如果是undefined则代表现在输入的是第一位数字
                            var firstNum = arr3[lastDotIdx3-1],secondNum = arr3[lastDotIdx3-2];

                            // 当输入非‘0’时且已经存在首位数字且为0则return
                            if(firstNum!==undefined && firstNum.title=='0'){
                                if(!secondNum){
                                    return
                                }else if(secondNum && secondNum.title!='.'){
                                    return
                                }
                            }
                        }

                    }

                    var newNum = {
                        type:'num',   // 类型
                        title:num
                    }

                    this.precalculatingEquation.push(newNum);
                },
                // 删除已输入的最后一个参数
                deleteParams(){
                    var len = this.precalculatingEquation.length;

                    if(len>1){
                        this.precalculatingEquation.pop();
                    }
                    return
                },
                // 清空所有输入的参数
                clearAllParams(){
                   this.precalculatingEquation = this .precalculatingEquation.slice(0,1);
                },
                // 确定计算公式
                checkEquation(){
                    var len = this.precalculatingEquation.length,
                        leftBracket = 0,   // 存放公式中左箭头的数量
                        rightBracket = 0;   // 存放公式中右箭头的数量

                    var paramsError = this.precalculatingEquation.some(item=>item.title===undefined)

                    if(paramsError){
                        this.$message({
                            message: '计算公式存在已删参数',
                            type: 'error'
                        });
                        return
                    }

                    if(this.precalculatingEquation[len-1].type=='sign' && this.precalculatingEquation[len-1].title!=')'){
                        this.$message({
                            message: '计算公式有误1',
                            type: 'error'
                        });
                        return
                    }

                    this.precalculatingEquation.forEach(item=>{
                        if(item.title == '('){
                            leftBracket++
                        }else if(item.title == ')'){
                            rightBracket++
                        }
                    })

                    if(leftBracket !== rightBracket){
                        this.$message({
                            message: '计算公式有误2',
                            type: 'error'
                        });
                        return
                    }

                    if(typeof this.liDetailFocus=='number'){

                        this.newForm[this.liFocus].detail[this.liDetailFocus].equation = this.precalculatingEquation.map(item=>item);

                    }else{

                        this.newForm[this.liFocus].equation = this.precalculatingEquation.map(item=>item);

                    }

                    this.computedEquation = false;
                },
            // ====================以上是计算公式里的方法====================
            
            // 发布时执行的方法，用于检测表单有没有错误 
            submit(){
                if(this.newForm.length==0){
                    return false
                }

                function check(arr){
                    for(let i=0;i<arr.length;i++){
                        // 如果有组件没有填写title则return false
                        if(!arr[i].title){
                            return false
                        }

                        // 考虑到单选和多选框
                        if(arr[i].id==4 || arr[i].id==5){
                            // 过滤掉没有值的选择框
                            let option = arr[i].option.filter(item=>item.value)
                            option.forEach((item,key)=>{
                                item.key = key
                            })

                            if(option.length==0){
                                // 若过滤所有空选择项后的数组长度为0则return false,反则过滤后的数组充当新的选择项数组
                                return false
                            }else{
                                arr[i].option = option;
                            }
                        }

                        // 若存在明细组件且明细组件中的detail数组长度为0则return false
                        if(arr[i].id==9){
                            if(arr[i].detail.length==0){
                                return false
                            }else{
                                let status = check(arr[i].detail)
                                if(status){
                                    return true
                                }else{
                                    return false
                                }
                            }
                        }

                        // 若存在计算公式组件且没有设置计算公式则return
                        if(arr[i].id==14){
                            if(arr[i].equation.length<=1){
                                return false
                            }else{
                                let equationArr = arr[i].equation;
                                for(let i=0;i<equationArr.length;i++){
                                    // 当计算公式中的计算参数组件被删除时报错
                                    if(equationArr[i].id !== undefined && equationArr[i].title == undefined){
                                        return false
                                    }
                                }
                            }
                        }

                    }

                    return true

                }

                let status = check(this.newForm)

                return status ? this.newForm : status;
                
            }
        }
    }
</script>

<style lang="scss">
    .form-design-second{
        font-family: MicrosoftYaHei;
        min-width:1720px;
        max-width:2000px;
        height:100%;
        overflow:hidden;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
        not supported by any browser */
        aside{
            width:340px;
            height:100%;
            background: #fff;
            &.el-aside-left{
                dl{
                    padding:22px 30px 0;
                    dt{
                        margin-bottom:30px;
                        line-height:20px;
                        font-size: 14px;
                        color: #333333;
                        letter-spacing: 0;
                    }
                    dd{
                        margin:0;
                        margin-bottom:10px;
                        width:280px;
                        height:36px;
                        background: #FFFFFF;
                        border: 1px solid #DDDDDD;
                        cursor:move;
                        >span{
                            float:left;
                            padding-left:10px;
                            line-height:36px;
                            font-size: 12px;
                            color: #666666;
                            letter-spacing: 0.11px;
                        }
                        >img{
                            float:right;
                            margin-top:8px;
                            margin-right:12px;
                            width:20px;
                            height:20px;
                            object-fit:contain;
                        }
                    }
                }
            }

            &.el-aside-right{
                >div{
                    padding:23px 30px;
                    // p标签的公共样式
                    >p{
                        position:relative;
                        > .tip{
                            position:absolute;
                            top:62px;
                            left:0;
                            color:red;
                        }
                    }

                    // p标签最顶上类型的样式
                    .type{
                        padding-bottom:8px;
                        height:20px;
                        line-height:20px;
                        font-size: 14px;
                        color: #666666;
                        letter-spacing: 0;
                    }

                    // p标签小标题的样式
                    .caption{
                        margin-top:30px;
                        height:20px;
                        line-height:20px;
                        font-size: 14px;
                        color: #000000;
                        letter-spacing: 0.13px;
                    }

                    // 输入框的样式
                    >.el-input{
                        margin-top:8px;
                    }

                    // 内容最多输入字数的样式
                    >span{
                        display:block;
                        margin-top:3px;
                        height:16px;
                        line-height:16px;
                        font-size: 12px;
                        color: #666666;
                        letter-spacing: 0.11px;
                        &.hide{
                            visibility:hidden;
                        }
                    }

                    // 单选框的样式
                    

                    // 多选框的样式
                    .el-checkbox{
                        margin-top:2px;
                        height:18px;
                        line-height:18px;
                        font-size:18px;
                        .el-checkbox__input{
                            .el-checkbox__inner{
                                width:18px;
                                height:18px;
                                &::after{
                                    height:10px;
                                    left:6px;
                                }
                            }
                        }
                        .el-checkbox__label{
                            padding-left:5px;
                            font-size: 12px;
                            color: #000000;
                            letter-spacing: 0.11px;
                        }
                    }

                    // 设置单(多)选框可选项的样式
                    .option{
                        max-height:258px;
                        overflow-x: hidden;
                        >div{
                            margin-top:8px;
                            .el-input{
                                width:200px;
                            }
                            .el-button{
                                margin-top: 7px;
                                margin-left: 10px;
                                padding: 0;
                                width: 18px;
                                height: 18px;
                            } 
                        }
                    }

                    // 单选框选择项的样式
                    .el-radio-group{
                        .el-radio{
                            margin-top:5px;
                            height:20px;
                            line-height:20px;
                            font-size: 14px;
                            color: #000000;
                            letter-spacing: 0.13px;
                        }
                    }

                    // 计算属性设置
                    .formula{
                        margin-top:8px;
                        padding:0 15px;
                        width:248px;
                        min-height:30px;
                        max-height:150px;
                        overflow-x:hidden;
                        line-height: 30px;
                        font-size:13px;
                        color: #606266;
                        border:1px solid #dcdfe6;
                        border-radius:4px;
                        cursor:pointer;
                        ul{
                            width:100%;
                            li:first-child{
                                margin-right:5px;
                            }
                            li.sign{
                                margin:0 5px;
                            }
                            li.params{
                                margin:4px;
                                padding:0 3px;
                                height:22px;
                                line-height:22px;
                                background:#ddd;
                                border-radius:4px;
                                // max-width:62px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow:hidden;
                            }
                            li.error{
                                background:pink;
                            }
                        }
                    }
                }
            }
        }

        .form-design-second-main{
            // overflow:hidden;
            margin:50px auto 0;
            padding:40px 0 40px 0;
            box-sizing:border-box;
            width:1000px;
            height:90%;
            min-height:680px;
            background: #fff;
            >ul{
                padding:0 32px 0 48px;
                overflow-x: hidden;
                height:100%;
                .empty{
                    text-align:center;
                    border:0 none;
                } 
                .insert{
                    content:'';
                    display:block;
                    margin:10px 0;
                    height:3px;
                    background:red;
                    border:4px solid #fff;
                    border-left-color:red;
                    border-right-color:red;
                }  
                            
                >li{
                    position:relative;
                    &:not(.insert){
                        padding:10px 0;
                    }

                    // 公共样式
                    >div{
                        // 关闭按钮样式
                        >.el-button.el-icon-close{
                            display:none;
                            position:absolute;
                            top:10px;
                            right:10px;
                            padding:0;
                            font-size:12px;
                            color:#999;
                            border:0 none;
                        }
                    }

                    .noDetail{
                        position:relative;
                        // margin-bottom:10px;
                        padding:12px 86px 12px 94px;
                        // border:2px dashed transparent;

                        // 聚焦时的样式
                        &.active{
                            padding:10px 84px 10px 92px;
                            border: 2px solid #348EFC;
                            >.el-button.el-icon-close{
                                display:block;
                            }
                        } 

                        // li下的公共属性
                        >div{
                            position:relative;
                            width:100%;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                            >span{
                                float:left;
                                padding-right:5px;
                                width:136px;
                                height:36px;
                                line-height:36px;
                                font-size: 14px;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                                color: #000000;
                                letter-spacing: 0.11px;
                                > .required{
                                    // margin-right:5px;
                                    font-size:12px;
                                    color:red;
                                    transform:scaleY(0.8);
                                }
                                > span{
                                    display:inline-block;
                                    height:36px;
                                }
                            }
                            >div{
                                box-sizing:border-box;
                                padding:0 10px;
                                // width:600px;
                                height:36px;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                                line-height:36px;
                                font-size: 12px;
                                color: #888888;
                                letter-spacing: 0.11px;
                                background: #FFFFFF;
                                border: 1px solid #DDDDDD;
                                border-radius:4px;
                                > img{
                                    float:right;
                                    margin-top:10px;
                                    margin-right:12px;
                                    width:16px;
                                    height:16px;
                                }
                            } 
                        }
        
                        // 单行输入框
                        .input{
                            >span{
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                .required{
                                    margin-right:5px;
                                    font-size:12px;
                                    color:red;
                                    transform:scaleY(0.8);
                                }
                            } 
                        }

                        // 多行输入框
                        .textarea{
                            >div{
                                position:relative;
                                padding:0;
                                height:140px;
                                overflow:hidden;
                                border:0 none;
                                >textarea{
                                    box-sizing:border-box;
                                    padding-top:10px;
                                    padding-left:10px;
                                    width:100%;
                                    height:100%;
                                    background: #FFFFFF;
                                    border: 1px solid #DDDDDD;
                                    border-radius:4px;
                                    resize:none;
                                }
                                >p{
                                    position:absolute;
                                    bottom:8px;
                                    right:23px;
                                    line-height: 16px;
                                    font-size: 12px;
                                    color: #000000;
                                    letter-spacing: 0.11px;
                                    >span{
                                        color: #3A3A3A;
                                    }
                                }
                            }
                        }

                        // 数字输入框
                        .numberInput{
                            >span{
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            } 
                        }

                        // 单选框
                        .radio,.checkbox{
                            >div{
                                >i{
                                    font-size: 18px;
                                    padding-right: 9px;
                                    line-height: 36px;
                                    transform: scaleY(0.8);
                                }
                            }
                        }

                        // 日期区间
                        .dateInterval{
                            >div{
                                pointer-events:none;
                            }
                        }

                        // 上传图片
                        .image{
                            >span{
                                position:relative;
                                height:50px;
                                >:last-child{
                                    position:absolute;
                                    top:18px;
                                    left:0;
                                    font-size: 12px;
                                    color: #999999;
                                    letter-spacing: 0.1px;
                                }
                            }
                            >div{
                                box-sizing: border-box;
                                padding:0;
                                width:148px;
                                height:148px;
                                line-height: 146px;
                                text-align:center;
                                // background-color: #fbfdff;
                                border: 1px dashed #c0ccda;
                                border-radius: 6px;
                                vertical-align: top;
                                >.el-icon-plus{
                                    font-size:28px;
                                    font-weight: 400;
                                    speak: none;
                                    vertical-align: baseline;
                                    display: inline-block;
                                }
                            }
                        }

                        // 说明文字
                        .caption{
                            height:auto;
                            >p{
                                padding:0 10px;
                                height:34px;
                                overflow:hidden;
                                text-overflow: ellipsis;
                                line-height:34px;
                                font-size: 12px;
                                color: #888888;
                                letter-spacing: 0.11px;
                                background: #FFFFFF;
                                border: 1px solid #DDDDDD;
                                border-radius:4px;
                            }
                        }

                        // 附件
                        .accessory{
                            >span{
                                height:auto;
                                >p{
                                    line-height:12px;
                                    font-size: 12px;
                                    color: #999999;
                                    letter-spacing: 0.1px;
                                }
                            }
                            >div{
                                padding:0;
                                height:auto;
                                border:0 none;
                                >span{
                                    font-size: 14px;
                                    color: #348EFC;
                                    letter-spacing: 0.13px;
                                }
                                >div{
                                    overflow:hidden;
                                    height:58px;
                                    border: 1px solid #DDDDDD;
                                    border-radius:4px;
                                    img{
                                        float:left;
                                        margin-top:19px;
                                        margin-left:18px;
                                        width:20px;
                                        height:20px;
                                    }
                                }
                            }
                        }

                        // 联系人
                        .linkMan{
                            >div{
                                border:0 none;
                                color:#348EFC;
                            }
                        }
                    }


                    // 明细组件特有样式
                    .detail{
                        position:relative;
                        // margin-bottom:10px;
                        padding: 2px;
                        pointer-events: auto;

                        // 聚焦时的样式
                        &.active{
                            padding:0;
                            border: 2px solid #348EFC;
                            >.el-button.el-icon-close{
                                display:block;
                            }
                        } 

                        >p{
                            border-top: 1px dashed #DDDDDD;
                            margin:12px auto 0;
                            padding: 30px 0;
                            width:732px;
                            height:16px;
                            line-height:16px;
                            font-size:12px;
                            color: #666666;
                            letter-spacing: 0.1px;
                        }

                        >ul{
                            >li{
                                position:relative;
                                padding: 5px 0;
                                &.addDetail{
                                    margin:0 auto;
                                    width:732px;
                                    height:36px;
                                    line-height:36px;
                                    background:#f6f8f9;
                                    text-align:center;
                                    font-size: 12px;
                                    color: #888888;
                                    letter-spacing: 0.11px;
                                }

                                // detail组件li下的公共属性
                                .detailItem{
                                    position:relative;
                                    // margin-bottom:10px;
                                    padding:12px 84px 12px 92px;
                                    box-sizing:border-box;
                                    width:100%;
                                    // overflow:hidden;
                                    position:relative;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;

                                    // li下的公共属性
                                    >div{
                                        position:relative;
                                        width:100%;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                        white-space:nowrap;
                                        >span{
                                            float:left;
                                            padding-right:5px;
                                            width:136px;
                                            height:36px;
                                            line-height:36px;
                                            font-size: 14px;
                                            overflow:hidden;
                                            text-overflow:ellipsis;
                                            white-space:nowrap;
                                            color: #000000;
                                            letter-spacing: 0.11px;
                                            > .required{
                                                // margin-right:5px;
                                                font-size:12px;
                                                color:red;
                                                transform:scaleY(0.8);
                                            }
                                            > span{
                                                display:inline-block;
                                                height:36px;
                                            }
                                        }
                                        >div{
                                            box-sizing:border-box;
                                            padding:0 10px;
                                            // width:600px;
                                            height:36px;
                                            overflow:hidden;
                                            text-overflow:ellipsis;
                                            white-space:nowrap;
                                            line-height:36px;
                                            font-size: 12px;
                                            color: #888888;
                                            letter-spacing: 0.11px;
                                            background: #FFFFFF;
                                            border: 1px solid #DDDDDD;
                                            border-radius:4px;
                                            > img{
                                                float:right;
                                                margin-top:10px;
                                                margin-right:12px;
                                                width:16px;
                                                height:16px;
                                            }
                                        } 
                                    }

                                    // 关闭按钮样式
                                    >.el-button.el-icon-close{
                                        display:none;
                                        position:absolute;
                                        top:10px;
                                        right:10px;
                                        padding:0;
                                        font-size:12px;
                                        color:#999;
                                        border:0 none;
                                    }

                                    // 单行输入框
                                    .input{
                                        >span{
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            .required{
                                                margin-right:5px;
                                                font-size:12px;
                                                color:red;
                                                transform:scaleY(0.8);
                                            }
                                        } 
                                    }

                                    // 多行输入框
                                    .textarea{
                                        >div{
                                            position:relative;
                                            padding:0;
                                            height:140px;
                                            overflow:hidden;
                                            border:0 none;
                                            >textarea{
                                                box-sizing:border-box;
                                                padding-top:10px;
                                                padding-left:10px;
                                                width:100%;
                                                height:100%;
                                                background: #FFFFFF;
                                                border: 1px solid #DDDDDD;
                                                border-radius:4px;
                                                resize:none;
                                            }
                                            >p{
                                                position:absolute;
                                                bottom:8px;
                                                right:23px;
                                                line-height: 16px;
                                                font-size: 12px;
                                                color: #000000;
                                                letter-spacing: 0.11px;
                                                >span{
                                                    color: #3A3A3A;
                                                }
                                            }
                                        }
                                    }
                                    // 数字输入框
                                    .numberInput{
                                        >span{
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        } 
                                    }

                                    // 单选框
                                    .radio,.checkbox{
                                        >div{
                                            >i{
                                                font-size: 18px;
                                                padding-right: 9px;
                                                line-height: 36px;
                                                transform: scaleY(0.8);
                                            }
                                        }
                                    }

                                    // 日期区间
                                    .dateInterval{
                                        >div{
                                            pointer-events:none;
                                        }
                                    }

                                    // 上传图片
                                    .image{
                                        >span{
                                            position:relative;
                                            height:50px;
                                            >:last-child{
                                                position:absolute;
                                                top:18px;
                                                left:0;
                                                font-size: 12px;
                                                color: #999999;
                                                letter-spacing: 0.1px;
                                            }
                                        }
                                        >div{
                                            box-sizing: border-box;
                                            padding:0;
                                            width:148px;
                                            height:148px;
                                            line-height: 146px;
                                            text-align:center;
                                            // background-color: #fbfdff;
                                            border: 1px dashed #c0ccda;
                                            border-radius: 6px;
                                            vertical-align: top;
                                            >.el-icon-plus{
                                                font-size:28px;
                                                font-weight: 400;
                                                speak: none;
                                                vertical-align: baseline;
                                                display: inline-block;
                                            }
                                        }
                                    }

                                    // 说明文字
                                    .caption{
                                        height:auto;
                                        >p{
                                            padding:0 10px;
                                            height:34px;
                                            overflow:hidden;
                                            text-overflow: ellipsis;
                                            line-height:34px;
                                            font-size: 12px;
                                            color: #888888;
                                            letter-spacing: 0.11px;
                                            background: #FFFFFF;
                                            border: 1px solid #DDDDDD;
                                            border-radius:4px;
                                        }
                                    }

                                    // 附件
                                    .accessory{
                                        >span{
                                            height:auto;
                                            >p{
                                                line-height:12px;
                                                font-size: 12px;
                                                color: #999999;
                                                letter-spacing: 0.1px;
                                            }
                                        }
                                        >div{
                                            padding:0;
                                            height:auto;
                                            border:0 none;
                                            >span{
                                                font-size: 14px;
                                                color: #348EFC;
                                                letter-spacing: 0.13px;
                                            }
                                            >div{
                                                overflow:hidden;
                                                height:58px;
                                                border: 1px solid #DDDDDD;
                                                border-radius:4px;
                                                img{
                                                    float:left;
                                                    margin-top:19px;
                                                    margin-left:18px;
                                                    width:20px;
                                                    height:20px;
                                                }
                                            }
                                        }
                                    }

                                    // 联系人
                                    .linkMan{
                                        >div{
                                            border:0 none;
                                            color:#348EFC;
                                        }
                                    }
                                }

                                
                                // 鼠标hover时的样式
                                &:hover{
                                    .detailItem{
                                        // padding:10px 84px 10px 92px;
                                        // border:2px dashed #348EFC;
                                        // border-left:0 none;
                                        // border-right:0 none;
                                        >.el-button.el-icon-close{
                                            display:block;
                                        }
                                        &::after{
                                            content:'';
                                            position:absolute;
                                            top:0;
                                            left:-2px;
                                            width:100%;
                                            height:100%;
                                            border:2px dashed #348EFC;
                                            pointer-events: none;
                                        }
                                    }
                                }
                                
                                // 焦点样式
                                .detailItem.active{
                                    .el-button.el-icon-close{
                                        display:block;
                                    }
                                    &::after{
                                        content:'';
                                        position:absolute;
                                        top:0;
                                        left:-2px;
                                        width:100%;
                                        height:100%;
                                        border:2px solid #348EFC;
                                    }
                                }

                            }
                            >li.before{
                                &::before{
                                    content:'';
                                    display:block;
                                    margin:10px 0;
                                    height:3px;
                                    background:red;
                                    border:4px solid #fff;
                                    border-left-color:red;
                                    border-right-color:red;
                                }
                            }

                            >li.after{
                                &::after{
                                    content:'';
                                    display:block;
                                    margin:10px 0;
                                    height:3px;
                                    background:red;
                                    border:4px solid #fff;
                                    border-left-color:red;
                                    border-right-color:red;
                                }
                            }

                        }

                        .cushion{
                            margin:30px auto 0;
                            border-top: 1px dashed #DDDDDD;
                            width:732px;
                            height:20px;
                        }

                        >.el-button{
                            margin-left:88px;
                            margin-bottom:10px;
                            pointer-events:none;
                       }

                    }

                    // li被hover时添加虚线边框样式
                    &:hover{
                        
                        .noDetail{
                            padding:10px 84px 10px 92px;
                        }

                        .detail{
                            padding:0;
                        }

                        >div{
                            border:2px dashed #348EFC;
                            >.el-button.el-icon-close{
                                display:block;
                                pointer-events: auto;
                            }
                        }
                    }

                    // 最后一个li添加margin-bottom用于LI超过ul高度时也可以hover在ul上
                    &:last-child{
                        margin-bottom:100px;
                    }

                    // 除了li为空时的样式
                    &:not(.empty){
                        cursor:move;
                    }

                      
                }

                // 伪元素
                >li.before{
                    &::before{
                        content:'';
                        display:block;
                        margin:10px 0;
                        height:3px;
                        background:red;
                        border:4px solid #fff;
                        border-left-color:red;
                        border-right-color:red;
                    }
                }

                >li.after{
                    &::after{
                        content:'';
                        display:block;
                        margin:10px 0;
                        height:3px;
                        background:red;
                        border:4px solid #fff;
                        border-left-color:red;
                        border-right-color:red;
                    }
                }

            }
        }

        // 计算公式弹窗
        .el-dialog{
            .el-dialog__body{
                .edit{
                    .textarea{
                        position:relative;
                        width:488px;
                        height:160px;
                        border:1px solid #DDDDDD;
                        >div{
                            box-sizing:border-box;
                            margin:5px 15px 35px;
                            width:460px;
                            height:120px;
                            line-height:34px;
                            border:0 none;
                            resize:none;
                            overflow-x: hidden;
                            >span:not(:first-child){
                                vertical-align:middle;
                                &.obj{
                                    display:inline-block;
                                    margin:0 5px;
                                    padding:0 10px;
                                    // max-width:58px;
                                    height:28px;
                                    // max-width:58px;
                                    line-height:28px;
                                    overflow:hidden;
                                    font-size: 12px;
                                    color: #666666;
                                    text-align: center;
                                    letter-spacing: 0;
                                    white-space:nowrap;
                                    text-overflow:ellipsis;
                                    background: #F1F1F1;
                                }
                                &.error{
                                    background: pink;
                                }
                                &.sign{
                                    padding:0 5px;
                                }
                                &.num{
                                    padding:0 0.8px;
                                }
                                &.mult{  // 乘号
                                    position:relative;
                                    top:3px
                                }
                            }
                        }
                        .delete{
                            position:absolute;
                            bottom:10px;
                            right:65px;
                            width:32px;
                            height:24px;
                            border:1px solid #ddd;
                            .arrow-left{
                                position:absolute;
                                top:50%;
                                left:-14px;
                                transform:translateY(-50%);
                                border:13px solid transparent;
                                border-left:0 none;
                                border-right:13px solid #ccc;
                                &::after{
                                    content:'';
                                    position:absolute;
                                    top:-13px;
                                    left:1px;
                                    border:13px solid transparent;
                                    border-left:0 none;
                                    border-right:13px solid #fff;
                                }
                            }
                            .el-icon-close{
                                position:absolute;
                                top:50%;
                                right:5px;
                                transform:translateY(-50%);
                                font-size:20px;
                                color:#999;
                            }
                        }
                        .clear{
                            position:absolute;
                            bottom:14px;
                            right:20px;
                            height:20px;
                            line-height:20px;
                            font-size: 14px;
                            color: #C96565;
                            letter-spacing: 0;
                        }
                    }
                    .object{
                        // margin-top:10px;
                        min-height:28px;
                        line-height:28px;
                        >strong{
                            margin-top:16px;
                            width:16px;
                            height:16px;
                            color:#fff;
                            line-height:16px;
                            text-indent:-1px;
                            text-align:center;
                            border-radius:50%;
                            background:#b1b1b1;
                            &:hover{
                                background:#409EFF;
                            }
                        }
                        >span{
                            margin-top:10px;
                            margin-bottom:10px;
                            margin-left:10px;
                            font-size: 12px;
                            color: #666666;
                            letter-spacing: 0;
                        }
                        .params{
                            margin-bottom:10px;
                            width: 380px;
                            max-height:76px;
                            overflow-x:hidden;
                            >span{
                                margin-top:10px;
                                margin-left:10px;
                                padding:0 10px;
                                // width:58px;
                                height:28px;
                                overflow:hidden;
                                font-size: 12px;
                                color: #666666;
                                text-align: center;
                                letter-spacing: 0;
                                white-space:nowrap;
                                text-overflow:ellipsis;
                                background: #F1F1F1;
                                // &:nth-child(-n+4){
                                //     margin-top:0;
                                // }
                            }
                        }
                    }
                    .compute-sign{
                        // margin-top:10px;
                        height:32px;
                        line-height:32px;
                        font-size:12px;
                        >.el-button{
                            margin-left:10px;
                            padding:0 15px;
                            width:50px;
                            height:30px;
                            font-size:20px;
                            color: #666666;
                        }
                    }
                    .numeric-keyad{
                        margin-top:10px;
                        >span{
                            line-height:32px;
                            font-size:12px;
                        }
                        >div{
                            width:200px;
                            .el-button{
                                margin-left:8px;
                                margin-bottom:10px;
                                padding:0;
                                width:50px;
                                height:32px;
                                line-height:32px;
                                font-size: 18px;
                                color: #666666;
                                letter-spacing: 0;
                                font-weight:600;
                            }
                        }
                    }
                }
            }
        }
    }
</style>